<template>
  <div>
    <App-tips></App-tips>
    <!-- 购物车商品列表 -->
    <div class="list">
      <van-swipe-cell v-for="item in cartList" :key="item.id">
        <van-checkbox v-model="item.checkedAll"></van-checkbox>
        <van-card
          class="goods-card"
          :num="item.number"
          :price="item.price"
          :title="item.name"
          :thumb="item.pic"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 提交订单栏 -->
    <div class="submit">
      <van-submit-bar :price="totalMoney" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" @change="fn">全选</van-checkbox>
        <template #tip>
          累计共 <strong>{{cartTotal.goodsCount}}</strong> 件商品，可点击
          <van-button type="primary" size="small">编辑</van-button>
          按钮进行商品数量修改
        </template>
      </van-submit-bar>
    </div>
    <!-- 底部 -->
    <div class="floor"></div>
  </div>
</template>

<script>
import AppTips from "../components/AppTips.vue";
import { Index } from "@/api/cart.js";
export default {
  async created() {
    // let {
    //   data: {
    //     data: { cartList, cartTotal },
    //   },
    // } = await Index();
    // this.cartList = cartList;
    // this.cartTotal = cartTotal;
    // console.log(cartList);
    // console.log(cartTotal);
    this.cartList=JSON.parse(localStorage.getItem("mycart")||'[]')
  },
  components: {
    AppTips,
  },
  data() {
    return {
      cartList: [],
      cartTotal: {},
      checkedAll: false,
    };
  },
  methods: {
    onSubmit() {},
    onClickEditAddress() {},
  },
  computed:{
    totalMoney(){
      return this.cartTotal.goodsAmount*100
    }
  },
  watch:{
    cartList:{
      handler(valArr){
        console.log(valArr);
        let count = valArr.length;
        let cheCount=valArr.filter(item=>item.checkedAll).length;
        this.checkedAll=count==cheCount;
      },
      deep:true
    }
  }
};
</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
/deep/.van-swipe-cell__wrapper {
  background-color: #fff;
  display: flex;
  .goods-card {
    flex: 1;
  }
  .van-checkbox {
    border-bottom: 1px solid gray;
  }
}
.submit {
  .van-submit-bar {
    bottom: 50px;
  }
}
// 底部
.floor {
  height: 200px;
  width: 100%;
}
</style>
